<!DOCTYPE html>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>组合框</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <label>
    专业
    <input id="specialty-combobox" data-options="valueField: 'specialtyId', textField: 'specialtyName'">
  </label>
  <label>
    阶段
    <input id="stage-combobox" data-options="valueField: 'stageId', textField: 'stageName'">
  </label>
  <label>
    课程
    <input id="course-combobox" data-options="valueField: 'courseId', textField: 'courseName'">
  </label>
  <script type="text/javascript">
    $(function () {
      $("#specialty-combobox").combobox({
        //加载远程列表数据的统一资源定位符（url）
        url: '${pageContext.request.contextPath}/combobox-server',
        //是否可以直接输入文本到字段中，默认值为true
        editable: false,
        queryParams: {
          type: 'specialty'
        },
        //在字段值发生更改的时候触发
        onChange: function (newValue, oldValue) {
          console.log(newValue);
          var stageId = $("#stage-combobox").combobox('getValue');
          if (stageId != null && stageId > 0) {
            var params = $("#course-combobox").combobox("options").queryParams;
            params.specialtyId = newValue;
            params.stageId = stageId;
            $("#course-combobox").combobox({
              url: '${pageContext.request.contextPath}/combobox-server',
              queryParams: params
            });
          }
        }
      });
      $("#stage-combobox").combobox({
        url: '${pageContext.request.contextPath}/combobox-server',
        editable: false,
        queryParams: {
          type: 'stage'
        },
        onChange: function (newValue, oldValue) {
          console.log(newValue);
          var specialtyId = $("#specialty-combobox").combobox('getValue');
          if (specialtyId != null && specialtyId > 0) {
            var params = $("#course-combobox").combobox("options").queryParams;
            params.specialtyId = specialtyId;
            params.stageId = newValue;
            $("#course-combobox").combobox({
              url: '${pageContext.request.contextPath}/combobox-server',
              queryParams: params
            });
          }
        }
      });
      $("#course-combobox").combobox({
        editable: false,
        queryParams: {
          type: 'course'
        },
      });
    })
  </script>
</body>
</html>